<template>
  <div>
    <!-- 广告图开始 -->
    <div v-if="sfkqsp" class="indexad" :style="adstyle">
      <div class="time">
        <span>{{adtime}}秒</span>
        <span @click="goindex">跳过</span>
      </div>
      <img :src="spggimg" alt="">
    </div>
    <!-- 晒照片开始 -->
    <div v-if="!sfkqsp" class="contantain" :style="bgobj">
      <router-view :resobj='resobj' @footnavzt='showfootnav'></router-view>
      <!-- <head-nav></head-nav> -->
      <div v-if="footnavzt" class="baskphoto-foot">
        <ul>
          <li :class="{footnavactive:footnavselected==0}" @click="footnavfn(0)">
            <router-link to="list">
              <p><i class="iconfont icon-shouye"></i></p>
              <p>首页</p>
            </router-link>
          </li>
          <li :class="{footnavactive:footnavselected==1}" @click="footnavfn(1)">
            <router-link to="top">
              <p><i class="iconfont icon-paihangbang"></i></p>
              <p>排行榜</p>
            </router-link>
          </li>
          <li :class="{footnavactive:footnavselected==2}" @click="footnavfn(2)">
            <router-link to="explain">
              <p><i class="iconfont icon-shuoming"></i></p>
              <p>活动说明</p>
            </router-link>
          </li>
          <!-- <li v-if="resobj.DBANZT" :class="{footnavactive:footnavselected==3}" @click="footnavfn(3)"> -->
          <li v-if="resobj.DBANZT==1" :class="{footnavactive:footnavselected==3}" @click="footnavfn(3)">
            <router-link to="">
              <p><i class="iconfont icon-erweima"></i></p>
              <p>{{resobj.DBMC}}</p>
            </router-link>
          </li>
        </ul>
        <ul v-if="resobj.DBANZT" class="foot-nav2">
          <li @click="fbfn(resobj.voteId)">
            <p><i class="iconfont icon-baoming"></i></p>
          </li>
        </ul>
      </div>
      <!-- 漂浮报名按钮 -->
      <div v-if="!resobj.DBANZT && this.$route.path =='/baskphoto/list'" class="pfbm" @click="fbfn(resobj.voteId)">
        <div>
          <p><i class="iconfont icon-baoming"></i></p>
          <p>报名</p>
        </div>
      </div>
    </div>
    <!-- 弹出分享图片 -->
    <div>
      <x-dialog :show.sync="show2" class="dialog-demo">
        <div class="img-box">
          <img :src="fximg" alt="">
          <div :style="{height:'0px', overflow:'hidden'}">
            <img ref="ewmbg" src="../../assets/img/sbewm.jpg" alt="">
          </div>
        </div>
        <div @click="show2=false">
          <span class="vux-close"></span>
        </div>
      </x-dialog>
    </div>
  </div>
</template>

<script>
import api from "@/api/api";
import { MessageBox, Toast, Navbar, TabItem } from "mint-ui";
import { XDialog } from "vux";
export default {
  data() {
    return {
      navselected: "1",
      bgcolor: "",
      footnavselected: 0,
      sfkqsp: false, //是否开启首屏广告
      adtime: 0, //倒计时广告事件
      footnavzt: true, //是否显示底部栏
      show2: false,
      fximg: "",
      userid: "",
      resobj: {},
      spggimg: "",
      dbtpimg:"",
      // resobj: {
      //   SFFX: "1",
      //   partCount: 8,
      //   FXBT: "分享标题",
      //   BH: "",
      //   SFKQSP: "1",
      //   DBMC: "关注我们",
      //   BJT: [
      //     {
      //       ACCESSORYNAME: "5095720181113125938443.jpg",
      //       ID: "8a8189b667111a350167112489fd0013",
      //       ACCESSORYTYPE: "jpg"
      //     }
      //   ],
      //   SFSH: "1",
      //   TPXS: "2",
      //   BT: "晒照片活动1",
      //   BMXZ: "报名须知报名须知报名须知报名须知报名须知",
      //   BMKSSJ: "2018-11-13 00:00:00",
      //   BMJSSJ: "2018-11-16 13:17:00",
      //   TPXZ: "投票须知投票须知投票须知投票须知投票须知投票须知",
      //   TPKSSJ: "2018-11-13 00:00:00",
      //   voteSum: 1588,
      //   ID: "8a8189b667111a3501671123bc1c0011",
      //   SPGG: [
      //     {
      //       ACCESSORYNAME: "1.jpg",
      //       ID: "8a8189b667111a35016711242a540012",
      //       ACCESSORYTYPE: "jpg"
      //     }
      //   ],
      //   INSTANCEID: "8a8189b667111a3501671123bbe50010",
      //   PXGZ: "1|2|3",
      //   isSignUp: 0,
      //   FXTB: [
      //     {
      //       ACCESSORYNAME: "3.jpg",
      //       ID: "8a8189b667111a35016711266f280014",
      //       ACCESSORYTYPE: "jpg"
      //     }
      //   ],
      //   HDJS: "晒照片活动1晒照片晒照片活动1活动1晒照片活动1",
      //   RSXZ: 100,
      //   CREATEDATE: "2018-11-14 15:33:53",
      //   UPDATEUSERID: "kfadmin",
      //   DBANZT: 1,
      //   DBTB: [],
      //   TPXSYS: 1,
      //   FXNR: "分享内容分享内容分享内容分享内容",
      //   CREATEUSERID: "kfadmin",
      //   UPDATEDATE: "2018-11-14 15:36:51",
      //   TPJSSJ: "2018-11-30 00:00:00",
      //   BJYS: "#FFC312",
      //   MANAGEID: null,
      //   SPGGSJ: 3
      // },

      data: {
        msg: "",
        code: 0,
        data: {}
      }
    };
  },
  computed: {
    bgobj() {
      return {
        backgroundColor: this.bgcolor,
        minHeight: document.documentElement.clientHeight + "px",
        backgroundSize: "100%",
        overflow: "hidden"
      };
    },
    adstyle() {
      return {
        height: document.documentElement.clientHeight + "px",
        overflow: "hidden"
      };
    }
  },
  methods: {
    //传回的底布导航数据状态
    showfootnav(data) {
      this.footnavzt = data; //显示底布导航
    },
    //全局设置数据请求
    getqjset(that, userid) {
      api.getActiveIndex(that, userid, function(res) {
        let data = res.data;
        console.log(data, "晒照片全局设置");
        if (data.code == 0) {
          if (data.data.SPGG.length != 0) {
            let zplist = data.data.SPGG;
            for (let k = 0; k < zplist.length; k++) {
              zplist[k].IMG = that.host.filehost + zplist[k].ID;
            }
            that.spggimg = data.data.SPGG[0].IMG;
            
            
          }
          if (data.data.DBTB.length != 0) {
            let zplist = data.data.DBTB;
            for (let k = 0; k < zplist.length; k++) {
              zplist[k].IMG = that.host.filehost + zplist[k].ID;
            }
            that.dbtpimg = data.data.DBTB[0].IMG;
          }
          that.resobj = data.data;
          that.bgcolor = data.data.BJYS;
          //判断是否开启首屏广告
          if (data.data.SFKQSP == 0) {
            that.sfkqsp = false;
          } else {
            that.sfkqsp = true;
          }
          //广告倒计时
          adtimefn(data.data.SPGGSJ);
          function adtimefn(time) {
            that.adtime = time;
            setTimeout(function() {
              time--;
              if (time >= 0) {
                adtimefn(time);
              } else {
                that.goindex();
              }
            }, 1000);
          }
        } else {
          that.Toastfn(data.msg, 2000, "");
        }
      });
    },
    // 底部导航
    footnavfn(index) {
      let that = this;
      if (index == 3) {
        //二维码
        console.log("弹出二维码");
        this.fxbgimg = this.$refs.ewmbg.src;
        // 生成二维码开始
        var data = [
            {
              x: 75,
              y: 170,
              w: 145,
              h: 155,
              url: this.fxbgimg
            },
            {
              x: 75,
              y: 20,
              w: 140,
              h: 140,
              url:that.dbtpimg
            }
          ],
          base64 = [];

        var c = document.createElement("canvas"),
          ctx = c.getContext("2d"),
          len = data.length;
        c.width = 290;
        c.height = 320;
        ctx.rect(0, 0, c.width, c.height);
        ctx.fillStyle = "#fff";
        ctx.fillRect(0, 0, c.width, c.height);
        function drawing(n) {
          if (n < len) {
            var img = new Image();
            img.crossOrigin = "Anonymous"; //解决跨域
            img.src = data[n].url;
            img.onload = function() {
              ctx.drawImage(img, data[n].x, data[n].y, data[n].w, data[n].h);
              drawing(n + 1); //递归
            };
          } else {
            //保存生成作品图片
            base64.push();
            //alert(JSON.stringify(base64));
            that.fximg = c.toDataURL("image/jpeg", 1);
          }
        }
        drawing(0);

        //生成二维码结束

        this.show2 = true; //显示弹出框
      } else {
        this.footnavselected = index;
      }
    },
    // 去首页
    goindex() {
      this.sfkqsp = false;
    },
    // 发布活动
    fbfn(voteId) {

      if (!this.$util.checkValidity()) {
        return
      }
      let that = this;
      if (this.userid) {
        this.footnavzt = false; //隐藏底部栏
        if (this.resobj.isSignUp != 0) {
          //isSignUp==0 为审核 1审核
          this.$router.push("article/" + voteId);
        } else {
          this.$router.push("release");
        }
      } else {
        Toast({
          message: "您还不是会员，快去注册吧！",
          duration: 1600
        });
        setTimeout(function() {
          that.$router.push({ path: "/register", query: { type: "sign" } });
        }, 1600);
        return false;
      }
    },
    // 提示函数
    Toastfn(message, duration, position) {
      Toast({
        message: message,
        duration: duration,
        position: position
      });
    }
  },
  mounted() {
    let that = this;
    var userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
    if (userinfo && userinfo.vipcode) {
      let userid = userinfo.vipcode;
      this.userid = userid;
    }
    // else {
    //   Toast({
    //     message: "您还不是会员，快去注册吧！",
    //     duration: 1600
    //   });
    //   setTimeout(function() {
    //     that.$router.push({ path: "/register", query: { type: "sign" } });
    //   }, 1600);
    //   return false;
    // }
    this.getqjset(that, this.userid); //获取全局设置信息
    this.footnavselected = localStorage.getItem("footnavselected"); //设置底部的状态
  },
  components: {
    XDialog
  }
};
</script>

<style scoped lang="less">
li {
  list-style: none;
}
// 首页广告样式
.indexad {
  .time {
    position: fixed;
    top: 10px;
    right: 10px;
    span {
      background: rgba(0, 0, 0, 0.5);
      border-radius: 20px;
      padding: 5px 10px;
      color: #ffffff;
    }
  }
}
// 底布
.baskphoto-foot {
  // display:flex;
  position: fixed;
  width: 100%;
  bottom: 0;
  background-color: #ffffff;
  border-top: 1px solid #f1f1f1;
  padding: 5px 0;

  ul {
    display: flex;
    justify-content: center;
    li {
      flex: 1;
      text-align: center;

      a {
        color: #666666;
        p {
          font-size: 12px;
        }
        .iconfont {
          font-size: 28px;
        }
      }
    }
  }
  ul.foot-nav2 {
    li {
      position: absolute;
      width: 55px;
      height: 55px;
      bottom: 58px;
			left: 50%;
			margin-left: -27.5px;
      border-radius: 50%;
      background-color: #ff0000;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .iconfont {
      font-size: 36px;
      color: #ffffff;
    }
  }
  .footnavactive {
    a {
      color: #ff0000;
    }
  }
}
// 漂浮报名
.pfbm {
  position: fixed;
  bottom: 70px;
  right: 10px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #666666;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  p {
    text-align: center;
    font-size: 0.24rem;
    i {
      font-size: 0.52rem;
    }
  }
}
@import "~vux/src/styles/close";

.dialog-demo {
  .weui-dialog {
    border-radius: 8px;
    padding-bottom: 8px;
  }
  .dialog-title {
    line-height: 30px;
    color: #666;
  }
  .img-box {
    height: 350px;
    overflow: hidden;
  }
  .vux-close {
    margin-top: 8px;
    margin-bottom: 8px;
  }
}
</style>
